<template>
  <!-- 新增投资商资金 弹框 -->
  <el-dialog title="投资商统计信息" v-model="editVisible" width="70%" draggable>
    <div class="container">
      <div class="mb10">
        <el-text class="mx-1"> 查询条件：</el-text>
      </div>
      <el-row :gutter="10">
        <el-col :xl="6" :lg="6" :md="12" :sm="24">
          <el-input v-model.trim="searchCondition.company_name" placeholder="投资商名称" clearable></el-input>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24">
          <el-date-picker v-model="queryDate" type="datetimerange" range-separator="至" format="YYYY-MM-DD HH:mm:ss" value-format="x" start-placeholder="开始时间" @change="changeQueryDate" end-placeholder="结束时间"> </el-date-picker>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24">
          <el-space wrap>
            <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
            <el-button type="warning" :icon="Refresh" :disabled="disabledbtn" @click="resetSearch">重置</el-button>
          </el-space>
        </el-col>
      </el-row>
      <div class="mb10">
        <el-text class="mx-1"> 查询结果：</el-text>
      </div>
      <el-table :data="tableList" border class="table" row-key="id" ref="multipleTableRef" v-loading="loading" :reserve-selection="true" @row-dblclick="rowDblclick">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="company_name" label="投资商" align="center"> </el-table-column>
        <el-table-column prop="purchase_amount" label="购货总额" align="center"> </el-table-column>
        <el-table-column prop="income_amount" label="应回款总金额" align="center"> </el-table-column>
        <el-table-column prop="collect_amount" label="已回款总金额" align="center"> </el-table-column>
        <el-table-column prop="enterprise_alipay_account_balance" label="企业支付宝账号余额" align="center"> </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @update:current-page="handleCurrentChange"
          @update:page-size="handleSizeChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="searchCondition.size"
          :current-page="searchCondition.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :total="total"
          :hide-on-single-page="false">
        </el-pagination>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" :disabled="disabledbtn" @click="editVisible = false">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search, Refresh } from "@element-plus/icons-vue";
import { useState } from "@/hooks/useState.ts";
import type { IInvestorsMoneyLogCountInfo, ISearchInvestorsMoneyLogCountInfo } from "@/types/user/investorMoneyLogInfo";
import { getInvestorMoneyLogCountInfo } from "@/utils/api/investorMoneyLog";
const { disabledbtn, loading, toggleState } = useState();
const editVisible = defineModel<boolean>("editVisible", { required: true });
const multipleTableRef = useTemplateRef("multipleTableRef"); /* 列表组件的引用 */
const total = ref(0);
const searchCondition = reactive<ISearchInvestorsMoneyLogCountInfo>({
  company_name: "",
  start_time: "",
  end_time: "",
  current: 1,
  size: 10
});

const queryDate = ref<Array<string>>([]);
const tableList = ref<Array<IInvestorsMoneyLogCountInfo>>([]);

onMounted(() => {
  // getTableInfo();
});
watch(
  () => editVisible.value,
  newValue => {
    if (newValue) {
      /* 初始化数据 */
    } else {
      tableList.value = [];
      searchCondition.company_name = "";
      searchCondition.start_time = "";
      searchCondition.end_time = "";
      queryDate.value = [];
      searchCondition.current = 1;
      searchCondition.size = 10;
    }
  }
);

/* 校验需要传递查询时间 */
function handleVerifySearchData() {
  if (searchCondition.start_time == "" || searchCondition.end_time == "") {
    ElMessage.warning("请选择统计的开始时间和结束时间");
    return false;
  }

  return true;
}

/* 查询 创建时间更改事件 */
function changeQueryDate(data: number[]) {
  if (data !== null) {
    searchCondition.start_time = data[0];
    searchCondition.end_time = data[1];
  } else {
    searchCondition.start_time = "";
    searchCondition.end_time = "";
  }
}
/* 搜索 */
function searchInfo() {
  if (!handleVerifySearchData()) return;
  searchCondition.current = 1;
  searchCondition.size = 10;
  getTableInfo();
}

/**
 * 重置搜索内容
 */
function resetSearch() {
  searchCondition.company_name = "";
  searchCondition.start_time = "";
  searchCondition.end_time = "";
  queryDate.value = [];
  if (!handleVerifySearchData()) return;
  getTableInfo();
}

/* 请求：获取表格中数据 */
function getTableInfo() {
  toggleState(true);
  getInvestorMoneyLogCountInfo<IInvestorsMoneyLogCountInfo, ISearchInvestorsMoneyLogCountInfo>(searchCondition)
    .then(res => {
      tableList.value = res.result.data;
      total.value = res.result.total;
    })
    .finally(() => {
      toggleState(false);
    });
}

/* 显示第几页 */
function handleCurrentChange(val: number) {
  searchCondition.current = val;
  if (!handleVerifySearchData()) return;
  getTableInfo();
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  searchCondition.current = 1;
  searchCondition.size = val;
  if (!handleVerifySearchData()) return;
  getTableInfo();
}

/* 双击当前行 */
function rowDblclick(row: IInvestorsMoneyLogCountInfo) {
  multipleTableRef.value!.toggleRowSelection(row);
}
</script>

<style lang="scss" scoped></style>
